<template>
    <div class="config-box">
        <div class="title-box">
            <h3>所有标签:</h3>
            <svg class="icon" aria-hidden="true" @click="close">
                <use xlink:href="#icon-cuowuguanbiquxiao"></use>
            </svg>
        </div>
        <div class="config-items">
            <ul class="item-ul">
                <li v-for="(item,index) in allTag" :key="index" class="item-tag">
                    <span class="item-bg-tag">
                        {{item.value}}
                    </span>
                    <button class="item-btn-tag" @click="del(item.id)">删除</button>
                </li>
            </ul>
        </div>
        <hr>
        <div class="item-add">
            <input type="text" v-model="newTag">
            <button class="btn-add" @click="add">添加属性</button>
        </div>
    </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
    name: 'tagConfig',
    data() {
        return {
            newTag: ''
        }
    },
    mounted() {
    },
    computed: {
        ...mapState({
            allTag: (state) => state.project.tag
        }),
    },
    methods: {
        ...mapActions({ initTag: 'initTag'}),
        close() {
            this.$emit("closeTagConfig");
        },
        // 删除
        del(id) {
            this.$confirm(`是否确认删除该标签`, async () => {
                let res = await this.$api.navData.delete(id);
                if (res.code == "success") {
                    this.$message.success('删除成功！');
                    this.initTag();
                } else {
                    this.$message.error('删除失败！');
                }
            });
        },
        // 新增
        add() {
            if (this.newTag) {
                this.$confirm(`是否确认新增${this.newTag}标签`, async () => {
                    let res = await this.$api.navData.addTag(this.newTag);
                    if (res.code == "success") {
                        this.$message.success('新增标签成功！');
                        this.initTag();
                        this.newTag = ''
                    } else {
                        this.$message.error('新增标签失败！');
                    }
                });
            } else {
                this.$message.warning('请输入新增标签！');
            }
        }
    }
}
</script>
<style lang="scss" scoped>
@import './tagConfig.scss';
</style>